<!-- 提现 -->
<template>
  <div class="withdraw">
    <el-card style="margin: 10px;">
      <div class="card" >
        <div class="con-l">
          <el-form ref="ruleFormRef" :model="form" label-width="130px">
            <el-form-item label="账户总额：">
              <div>{{ userinfo.amount }} 元</div>
            </el-form-item>
            <el-form-item label="可提现金额：">
              <div>{{ userinfo.amount*1 - userinfo.freeze*1 }} 元</div>
            </el-form-item>
            <el-form-item label="提现金额：">
              <el-input v-model="form.amount" />
            </el-form-item>
            <el-form-item label="提现密码：">
              <el-input v-model="form.withdrawal_pwd" />
            </el-form-item>

            <!-- <el-form-item label="收款方式：">
              <el-radio-group v-model="form.radio">
                <el-radio :label="1">银行卡</el-radio>
                <el-radio :label="2">USDT TRC20</el-radio>
                <el-radio :label="3">USDT ERC20</el-radio>
                <el-radio :label="4">ETH</el-radio>
              </el-radio-group>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" class="pd-12" @click="submit" >申请提现</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="con-r">
          <div class="des-item">
            <el-descriptions title="提现银行卡信息" border column="1">
              <el-descriptions-item label="持卡人姓名" label-class-name="labelname">{{ account.full_name }}</el-descriptions-item>
              <el-descriptions-item label="手机号码">{{ account.phone }}</el-descriptions-item>
              <el-descriptions-item label="银行卡账号">{{ account.bank_account }}</el-descriptions-item>
              <el-descriptions-item label="所属银行">{{ account.bank_name }}</el-descriptions-item>
              <el-descriptions-item label="支行">{{ account.bank_name }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <!-- <div class="des-item">
            <el-descriptions title="USDT信息" border column="1">
              <el-descriptions-item label="USDT TRC20地址" label-class-name="labelname">TGyLuCEJzfjTVaFdD9wEQM8stBaM7PsMtg</el-descriptions-item>
              <el-descriptions-item label="USDT ERC20地址">TGyLuCEJzfjTVaFdD9wEQM8stBaM7PsMtg</el-descriptions-item>
            </el-descriptions>
          </div> -->
          <!-- <div class="des-item">
            <el-descriptions title="ETH信息" border column="1">
              <el-descriptions-item label="ETH地址" label-class-name="labelname">TGyLuCEJzfjTVaFdD9wEQM8stBaM7PsMtg</el-descriptions-item>
            </el-descriptions>
          </div> -->
        </div>
      </div>

    </el-card>
  </div>
</template>

<script>
import { reactive, toRefs, toRaw, onMounted } from 'vue'
import { withdrawal, account } from '@/api/account.js'
import { getuserinfo } from '@/api/user.js'

export default {
  setup () {
    const state = reactive({
      form: {},
      userinfo: {},
      account: {}
    })
    onMounted(() => {
      getuserinfodata()
      getaccount()
    })

    const getuserinfodata = async () => {
      try {
        const res = await getuserinfo()
        console.log(res)
        state.userinfo = res
      } catch (err) {
        console.log(err)
      }
    }

    const getaccount = async () => {
      try {
        const res = await account()
        console.log(res)
        state.account = res
      } catch (err) {
        console.log(err)
      }
    }

    const submit = async () => {
      try {
        const params = toRaw(state.form)
        params.receiving_id = state.userinfo.id
        const res = await withdrawal(params)
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    }
    return {
      ...toRefs(state),
      submit
      // getuserinfodatas
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  // justify-content: space-between;
  :deep(.el-radio-group) {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
  }
  .con-l, .con-r {
    width: 40%;
  }
  .con-r {
    margin-left: 30px;
    .des-item {
      margin-top: 20px;
    }
  }
}
</style>
